<template>
  <div class="mod-user">
    <div class="search-bar">
      <el-form
        @submit.native.prevent
        :inline="true"
        class="search-form"
        ref="searchForm"
        :model="searchForm"
        size="small"
      >
        <div class="input-row">
          <el-form-item prop="name" label="订单编号:">
            <el-input
              v-model="searchForm.orderNumber"
              type="text"
              clearable
              placeholder="请输入订单编号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="name" label="骑手姓名:">
            <el-input
              v-model="searchForm.riderName"
              type="text"
              clearable
              placeholder="请输入骑手姓名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="phone" label="骑手手机号:">
            <el-input
              v-model="searchForm.phone"
              type="number"
              clearable
              maxlength="11"
              :placeholder="$t('publics.mobilePhone')"
            ></el-input>
          </el-form-item>

          <el-form-item prop="status" :label="$t('publics.status') + ':'">
            <el-select
              v-model="searchForm.status"
              clearable
              :placeholder="$t('publics.status')"
            >
              <el-option
                v-for="item in status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="接单时间:">
            <el-date-picker
              size="small"
              v-model="timer"
              type="datetimerange"
              :range-separator="$t('date.tip')"
              value-format="yyyy-MM-dd HH:mm:ss"
              :start-placeholder="$t('text.startTime')"
              :end-placeholder="$t('date.end')"
              :default-time="['00:00:00', '23:59:59']"
              @change="createTimeChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <div class="default-btn primary-btn" @click="searchChange(true)">
              {{ $t("crud.searchBtn") }}
            </div>
            <div class="default-btn" @click="resetForm('searchForm')">
              {{ $t("product.reset") }}
            </div>
          </el-form-item>
          <el-form-item style="float: right;">
            <div class="default-btn" @click="refreshSearchChange">
              {{ $t("transport.refresh") }}
              <i class="el-icon-refresh"></i>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con">
        <div v-if="dataList.length === 0" class="empty-text">
          {{ $t("user.noData") }}
        </div>
        <el-table
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%"
        >
          <el-table-column
            fixed
            label="订单编号"
            prop="orderNumber"
            width="240"
            align="center"
          />
          <el-table-column
            fixed
            label="骑手信息"
            prop="riderInfo"
            align="center"
          />
          <el-table-column
            fixed
            label="取货地址"
            prop="shopAddress"
            align="center"
          />

          <el-table-column
            prop="userAddr"
            align="center"
            label="配送地址"
            width="200px"
          >
          </el-table-column>

          <el-table-column
            prop="validStr"
            width="160"
            align="center"
            label="接单时间"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.startTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            width="200"
            align="center"
            label="配送状态"
          >
            <template slot-scope="scope">
              <div class="dot-status">
                {{
                  [
                    "待接单",
                    "正在赶往商家",
                    "到店取货中",
                    "配送中",
                    "已完成",
                    "失败",
                    "已取消",
                  ][scope.row.status]
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="预计送达时间"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.estimatedDeliveryTime || "" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="配送完成时间"
            align="center"
          >
            <template slot-scope="scope">
              <span>
                {{ scope.row.finallyTime || "" }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            align="center"
            :label="$t('crud.menu')"
            width="230"
          >
            <template slot-scope="scope">
              <div class="text-btn-con">
                <div
                  class="default-btn text-btn"
                  @click.stop="viewInfo(scope.row.id)"
                >
                  查看
                </div>
              </div>
            </template>
          </el-table-column>
          <div slot="empty">&nbsp;</div>
        </el-table>
      </div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.pageSize"
        :total="page.total"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
    <InfoEcho ref="InfoEcho" />
  </div>
</template>

<script>
import moment from "moment";
import InfoEcho from "./InfoEcho.vue";
export default {
  components: {
    InfoEcho,
  },
  data() {
    return {
      theData: null, // 保存上次点击查询的请求条件
      dataList: [],
      timer: [], // 注册时间范围
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
      },
      searchForm: {},
      status: [
        {
          label: "待接单",
          value: 0,
        },
        {
          label: "正在赶往商家",
          value: 1,
        },
        {
          label: "到店取货中",
          value: 2,
        },
        {
          label: "配送中",
          value: 3,
        },
        {
          label: "已完成",
          value: 4,
        },
        {
          label: "失败",
          value: 5,
        },
        {
          label: "已取消",
          value: 6,
        },
      ],
    };
  },
  mounted() {
    this.getDataList(this.page);
  },
  methods: {
    moment,
    generateRandomCode(length, num) {
      const characters = "0123456789";
      let randomCode = num;

      for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        randomCode += characters.charAt(randomIndex);
      }

      return randomCode;
    },
    // 离职
    dimission(id) {
      this.$confirm("确认执行 [离职] 操作？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
        showCancelButton: true,
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl("/platform/rider/diss/" + id),
          method: "put",
        }).then(({ code }) => {
          if (code === "00000") {
            this.$message({
              message: "操作成功",
              type: "success",
            });
            this.getDataList(this.page);
          }
        });
      });
    },
    // 查看
    viewInfo(id) {
      this.$refs.InfoEcho.open(id);
    },
    /**
     * 获取骑手列表
     */
    getDataList(page, newData = false) {
      if (newData || !this.theData) {
        this.theData = JSON.parse(JSON.stringify(this.searchForm));
      }
      this.$http({
        url: this.$http.adornUrl("/platform/rider/order-rider/list"),
        method: "post",
        params: {
          current: page == null ? this.page.currentPage : page.currentPage,
          size: page == null ? this.page.pageSize : page.pageSize,
        },
        data: this.$http.adornParams(Object.assign(this.theData)),
      }).then(({ data }) => {
        this.dataList = data.records;
        this.page.total = data.total;
      });
    },

    refreshSearchChange(){
      this.resetForm('searchForm');
      this.searchChange(true)
    },

    // 条件查询 JSON.stringify(arr)
    searchChange(newData = false) {
      this.page.currentPage = 1;
      this.getDataList(this.page, newData);
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.getDataList(this.page);
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.getDataList(this.page);
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.searchForm = {};
      this.$forceUpdate();
      this.timer = [];
    },
    createTimeChange() {
      // 处理 searchForm 和 endTime
      if (!this.timer || this.timer.length === 0) {
        delete this.searchForm.startTime;
        delete this.searchForm.endTime;
      } else {
        this.searchForm.startTime = this.timer[0];
        this.searchForm.endTime = this.timer[1];
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.mod-user {
  .tips .text {
    color: #ff0000;
  }
  ::v-deep .el-table__fixed {
    height: auto !important;
    bottom: 16px !important;
    &::before {
      background-color: transparent !important;
    }
  }
  ::v-deep .el-table__fixed-right {
    height: auto !important;
    bottom: 16px !important;
    &::before {
      background-color: transparent !important;
    }
  }
}
.TagS {
  margin-right: 10px !important;
}

.table-con {
  position: relative;
}

.empty-text {
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  color: #909399;
}
::v-deep .export-load {
  top: -50% !important;
}
::v-deep
  .el-select
  .el-select__tags
  > span
  > .el-tag.el-tag--info:nth-last-child(2) {
  max-width: 120px;
}

.dot-status {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0 auto;
}
.dimission {
  color: red;
}
</style>
